/*** author: sailing date: 2020/4/14 *****/

<template>
  <div class="shakePage">
    <van-button @click="getF" type="info">获取</van-button>
    <div class="nearbycontainer">
      <ul class="nlist">
        <li class="item" @click="clickUser(el)" v-for="el in friends">
          <div class="user">
            <img :src="el.imgsrc" />
            <p style="margin-left:-15px">{{ el.username }}</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import Config from '../../server/config';
import socket from '../../server/socket';
import eventBus from '../../server/eventBus';
import androidMsg from '../../server/androidMessage';
import webrtc from '../../server/webrtc';
@Component
export default class Shake extends Vue {
  private friends: any = [];

  public mounted() {
    eventBus.$on('nearby_friend', this.nearby);
  }
  private getF() {
    // androidMsg.send_msg({ type: 'get_music' });
    // return;
    socket.sendMsg('message', {
      type: 'get_nearby_friend',
    });
  }

  private clickUser(el: any) {
    console.log('el:', el);
    webrtc.doCall(el.username);
    this.$router.push({ name: 'musicList', params: el });
  }

  private activated() {
    this.getF();
  }

  private nearby(data: any) {
    console.log('near_by:', data);
    const list = data.list.map((item: any) => {
      const num: number = Math.floor(Math.random() * 10 + 1);
      const str: string = '../../assets/img/' + num + '.jpg';
      console.log('str:', str);
      item.imgsrc = require('../../assets/img/' + num + '.jpg');
      return item;
      /*
      return {
        index: 0,
        //img: require("../../assets/img/" + num + ".jpg"),
        img: require("@/assets/img/" + num + ".jpg")
        id: item
      };
      */
    });

    console.log('data.list:', list);
    this.friends = list;
  }
}
</script>

<style scoped lang="scss">
.shakePage {
  background: #cecece;
  width: 100%;
  height: 100%;
  position: absolute;
  .nearbycontainer {
    margin-top: 50px;
    width: 100%;
    .nlist {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      .item {
        margin: 20px;
        .user {
          width: 60px;
          height: 60px;
          border: 2px solid #fff;
          box-shadow: 1px 4px 20px #000;
          border-radius: 50%;
          img {
            height: 60px;
            width: 60px;
            border-radius: 60px;
          }
        }
      }
    }
  }
}
</style>
